<template>
	<view>
		<!-- <u-loading-icon text="加载中" textSize="18"></u-loading-icon> -->
		<!-- <u-loading-page :loading="true"></u-loading-page> -->
		<view class="menu-content">
			<view class="mc-left">
				<view
					v-for="(item,index) in typeList"
					:key="index"
					:class="{'mc-l-type': true, 'active-type-box': curActiveTypeIndex === index }"
					@click="activeType(item,index)"
				>
					<u--image
						class="img-box"
						width="80rpx"
						height="80rpx"
						:showLoading="true"
						:src="curActiveTypeIndex === index ? item.activeImgUrl : item.inactiveImgUrl"
						@error="e => imageLoadError(e, item)"
					>
						<view slot="error" style="font-size: 24rpx;">加载失败</view></u--image>
						<template v-slot:loading>
						    <u-loading-icon color="red"></u-loading-icon>
						</template>
					<view class="title-box">{{ item.label }}</view>
				</view>
				<view class="mc-l-add">
					<u-button
						type="primary"
						text="新增"
						size="small"
						icon="plus"
						color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
						@click="addDishes"
					></u-button>
				</view>
			</view>
			<view class="mc-right">
				<view v-if="dishesList.length === 0" class="null-data-box">暂无数据</view>
				<view class="mc-r-dishes">
					<u-list @scrolltolower="scrolltolower">
					      <u-list-item v-for="(item, index) in dishesList" :key="index">
					        <view class="dishes-item" @click="goDetail(item)">
					        	<view class="dishes-item-img">
									<u--image
									    :showLoading="true"
									    :src="item.img || defaultImgUrl"
									    width="250rpx"
									    height="150rpx"
										style="object-fit: cover;"
										radius="12rpx"
									  >
										<template v-slot:loading>
										    <u-loading-icon color="red"></u-loading-icon>
										</template>
									  </u--image>
					        		<!-- <image :src="item.img || defaultImgUrl" class="dii-img"></image> -->
					        	</view>
					        	<view class="dishes-item-info">
					        		<view class="dii-title">{{ item.name }}</view>
					        		<view class="dii-intro">{{ item.intro }}</view>
					        	</view>
					        </view>
					      </u-list-item>
						  <view v-if="(pageCondition.page > 1) && (isLoadOver)" class="no-data-box">已经到底部了</view>
						  <view style="height: 100rpx;"></view>
					</u-list>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import baseUrl from '@/config/index.js'
	import AuthorizationToken from '@/config/token.js'
	import logoImg from '@/static/logo.png'
	import roomImgSvg from '@/static/room_v2.svg'
	import roomInImgSvg from '@/static/room_v2_in.svg'
	export default {
		data() {
			return {
				logoImg,
				roomImgSvg,
				roomInImgSvg,
				defaultImgUrl: 'https://lyw.cdbytech.top:3017/images/41fb32024d054d218de57d8fcecf40ba.png',
				title: 'Hello Menu !',
				typeList: [],
				curActiveTypeIndex: 0,
				dishesList: [],
				pageCondition: {
					page: 1,
					size:10
				},
				curType: '',
				isLoadOver: false
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.resetPage()
			this.getTypeList()
		},
		created() {
			// this.getTypeList()
		},
		methods: {
			imageLoadError(e, item) {
				console.log('图片加载失败', e, item)
			},
			getTypeList() {
				const vm = this
				uni.request({
					header: {
						Authorization: AuthorizationToken
					},
					method: 'POST',
					url: baseUrl + '/agw/mongodb/table/data_v3',
					data: {
						page: 1,
						size: 99,
						tablePkid: 'cc38d680868d4ddc8193600c6d5c4649'
					},
					success(res) {
						console.log('返回结果', res)
						const data = res.data
						if(data['code'] === 0) {
							const list = (data['data'] || []).sort((a,b) => {
								return Number(a.sort) - Number(b.sort)
							})
							console.log('数据为', list)
							const typeList = list.map(i => {
								let activeImgUrl = ''
								let inactiveImgUrl = ''
								if (Array.isArray(i.activeImg)) {
									activeImgUrl = (i.activeImg[0] || {}).url || ''
								}
								if (Array.isArray(i.inactiveImg)) {
									inactiveImgUrl = (i.inactiveImg[0] || {}).url || ''
								}
								const baseUrl = 'https://lyw.cdbytech.top:3017/images/'
								activeImgUrl = baseUrl + activeImgUrl
								inactiveImgUrl = baseUrl + inactiveImgUrl
								return {
									label: i.name,
									activeImgUrl: activeImgUrl,
									inactiveImgUrl: inactiveImgUrl,
									code: i.code
								}
							})
							const _t = [{
								label: '全部',
								img: '',
								code: '',
								activeImgUrl: vm.roomImgSvg,
								inactiveImgUrl: vm.roomInImgSvg,
							}].concat(typeList)
							vm.typeList.length = 0
							vm.typeList = [...vm.typeList, ..._t]
							console.log('格式化后的数据为', vm.typeList)
							// 缓存种类信息
							uni.setStorageSync('dish_type', JSON.stringify(vm.typeList.slice(1)))
							vm.getDishList()
						}
					}
				})
			},
			getDishList() {
				const vm = this
				uni.request({
					header: {
						Authorization: AuthorizationToken
					},
					method: 'POST',
					url: baseUrl + '/agw/mongodb/table/data_v3',
					data: {
						page: vm.pageCondition.page,
						size: vm.pageCondition.size,
						tablePkid: '4163d0000b7a4b2990392d5a534b7271',
						condition: {
							type: vm.curType
						}
					},
					success(res) {
						console.log('返回结果', res)
						const data = res.data
						if(data['code'] === 0) {
							const list = data['data'] || []
							console.log('dish数据为', list)
							if (list.length < vm.pageCondition.size) {
								vm.isLoadOver = true
								console.log('数据已经加载完毕')
							} else {
								vm.pageCondition.page += 1
							}
							const t = list.map(i => {
								let _url = ''
								if (i.thumb) {
									_url = `https://lyw.cdbytech.top:3017` + i.thumb?.url
								} else if (Array.isArray(i.cover)) {
									_url = (i.cover[0] || {}).url || ''
								}
								if (!String(_url).includes('lyw.cdbytech.top')) {
									_url = 'https://lyw.cdbytech.top:3017' + _url
								}
								return {
									name: i.name,
									intro: vm.getStr(i.intro || i.remarks),
									img: _url,
									type: i.type,
									pkid: i.pkid
								}
							})
							vm.dishesList = vm.dishesList.concat(t)
						}
					}
				})
			},
			getStr(str) {
				if (String(str).length > 24) {
					return String(str).slice(0,24) + '...'
				} else {
					return str
				}
			},
			activeType(item,index) {
				this.curActiveTypeIndex = index
				this.curType = item.type || item.code
				this.resetPage()
				this.getDishList()
			},
			resetPage() {
				this.isLoadOver = false
				this.pageCondition.page = 1
				this.dishesList.length = 0
			},
			
			scrolltolower() {
				console.log('已经滚动到底部')
				if (!this.isLoadOver) {
					this.getDishList()
				}
			},
			loadmore() {
				
			},
			addDishes() {
				uni.navigateTo({
					url: '/pages/index/add'
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/index/detail?pkid=${item.pkid || '123'}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.menu-content{
		display: flex;
		height: 100vh;
		.mc-left{
			width: 160rpx;
			border-right: 1rpx solid #ddd;
			height: 100vh;
			text-align: center;
			box-sizing: border-box;
			padding-top: 60rpx;
			.mc-l-type{
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					width: 80rpx;
					height: 80rpx;
				}
				.img-box{}
				.title-box{
					font-size: 22rpx;
					font-weight: bold;
					color: #666;
					margin-top: 10rpx;
					margin-bottom: 10rpx;
				}
			}
			.active-type-box{
				background-color: #fff;
				.title-box{
					color: #2979ff;
				}
			}
			.mc-l-add{
				border-top: 1rpx solid #fff;
				margin: 0 20rpx;
				padding-top: 20rpx;
			}
		}
		.mc-right{
			flex: 1;
			box-sizing: border-box;
			padding: 20rpx;
			box-sizing: border-box;
			height: 100vh;
			// overflow: hidden;
			.null-data-box{
				text-align: center;
				padding: 40rpx;
				color: #999;
			}
			.mc-r-dishes{
				height: 100%;
				overflow: hidden;
				box-sizing: border-box;
				.dishes-item{
					display: flex;
					background-color: #fff;
					margin-bottom: 20rpx;
					box-sizing: border-box;
					padding: 20rpx;
					border-radius: 6rpx;
					// border: 1rpx solid #f1f2f3;
					border-radius: 12rpx;
					.dishes-item-img{
						width: 250rpx;
						height: 150rpx;
						margin-right: 20rpx;
						image{
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
						.dii-img{
							width: 100%;
							height: 100%;
							object-fit: cover;
							img{
								object-fit: cover!important;
							}
						}
					}
					.dishes-item-info{
						height: 150rpx;
						.dii-title{
							font-weight: bold;
							font-size: 30rpx;
							margin-bottom: 6rpx;
						}
						.dii-intro{
							color: #909399;
							font-size: 24rpx;
						}
					}
				}
				.no-data-box{
					text-align: center;
					color: #909399;
				}
			}
		}
	}
</style>
